<!DOCTYPE HTML>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no,minimal-ui">
    <title>搜索</title>
    <meta name="apple-mobile-web-app-capable" content="yes"/>
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
    <meta content="telephone=no" name="format-detection"/>
    <link rel="stylesheet" type="text/css" href="css/reset.css">
    <link rel="stylesheet" type="text/css" href="css/theme.css">
    <link rel="stylesheet" type="text/css" href="css/global.css">
    <link rel="stylesheet" type="text/css" href="css/web.css">

    <!--    elementUI-->
    <link rel="stylesheet" type="text/css" href="css/index.css">

</head>

<body class="W-body">

<div id="app" class="in-wrap">
    <div id="aCoursesList" class="bg-fa of">
        <!-- /课程列表 开始 -->
        <section class="container">
            <header class="comm-title">
                <h2 class="fl tac">
                    <span class="c-333">列表</span>
                </h2>
            </header>
            <section class="c-sort-box">
                <section class="c-s-dl">
                    <dl>
                        <!--						<dt>-->
                        <!--						  <span class="c-999 fsize14">查询条件</span>-->
                        <!--						</dt>-->
                        <dd class="c-s-dl-li">
                            <!-- 一级类别 开始-->
                            <ul class="clearfix">
                                <li>
                                    <el-form :inline="true">
                                        <el-form-item label="关键字">
                                            <el-input v-model="queryVo.keyword" placeholder="关键字"></el-input>
                                        </el-form-item>
                                        <el-form-item>
                                            <el-button type="primary" @click="fetchData()">查询</el-button>
                                        </el-form-item>
                                    </el-form>
                                </li>
                            </ul>
                            <!-- /一级类别 结束-->
                        </dd>
                    </dl>
                </section>

                <div class="mt40">
                    <!-- /无数据提示 开始-->
                    <section v-if="docInfo.length<=0" class="no-data-wrap">
                        <em class="icon30 no-data-ico">&nbsp;</em> <span class="c-666 fsize14 ml10 vam">没有相关数据，小编正在努力整理中...</span>
                    </section>
                    <!-- /无数据提示 结束-->

                    <article v-else >
                        <ul class="of" id="bna" v-for="doc in docInfo" :key="doc.id">
                            <li style="">
                                <div class="cc-l-wrap">
                                    <h1>
                                        <a style="" href="#" :title="doc.title" v-html="doc.title"
                                           class="course-title fsize18 c-333"></a>
                                    </h1>
                                    <p v-html="doc.fourEle+'...'"/>
                                    <p v-html="doc.body+'...'"/>
                                </div>
                            </li>
                        </ul>
                        <div class="clear"></div>
                    </article>
                </div>
            </section>
        </section>
        <!-- /课程列表 结束 -->
    </div>

</div>
<script src="js/vue.min.js"></script>

<script src="js/elment-ui-index.js"></script>
<script src="js/axios.min.js"></script>
<script>
    new Vue({
        el: '#app',
        data() {
            return {
                queryVo: {
                    keyword: '',
                    pageNo: 0,
                    pageSize: 5
                },
                docInfo: []
            }
        },
        methods: {
            fetchData() {
                if(this.queryVo.keyword===''){
                    this.$message.warning("关键字不能为空")
                }else {
                    axios.post("admin/doc/query", this.queryVo).then(res => {
                        console.log(res.data.data)
                        this.docInfo = res.data.data.items
                    })
                }
            }
        }
    })
</script>
</body>

</html>